<template>
  <div class="box">
    <div class="img_banner">
      <van-swipe
        :autoplay="3000"
        style="width:100%;height:100%"
      >
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
        >
          <img v-lazy="image.bander_img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div
      class="text"
      v-show="show"
    >今天没有寿星和周年庆的小伙伴呦！</div>
    <div v-show="showBirthday">
      <van-row
        v-for="(item,i) in list"
        :key="i"
      >
        <div
          class="skeleton clearfix"
          @click="showBirthdayDetails(item)"
        >
          <span
            class="left skeleton_title"
            v-if="item.dd_avatar==''"
          >
            <span v-if="item.name.length < 3">
              {{((item.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
            </span>
            <span v-if="item.name.length >= 3">
              {{((item.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
            </span>
          </span>
          <span
            class="left skeleton_title"
            v-else
          >
            <img
              style="border-radius:50%;width:100%"
              :src="item.dd_avatar"
            >
          </span>
          <ul class="left">
            <li>{{item.name}}</li>
            <li><span v-if="item.type==1">{{item.birthday}}</span><span v-else-if="item.type==2">入职{{ Number(num)-Number(((item.birthday.split("").reverse().join("")).substring(6)).split("").reverse().join(""))}}周年</span></li>
          </ul>
          <van-icon
            class="right"
            name="point-gift"
          />
        </div>
      </van-row>
    </div>
  </div>
</template>

<script type="text/javascript">
import { Row, Icon, Swipe, SwipeItem } from "vant";
export default {
  data() {
    return {
      show: true,
      showBirthday: false,
      list: [],
      num: 0,

      images: [
        {
          bander_img:
            ""
        },
        {
          bander_img:
            ""
        }
      ]
    };
  },
  components: {
    [Row.name]: Row,
    [Icon.name]: Icon,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  created() {
    this.getBirthday();
    this.show_Rotation_chart();
    dd.biz.navigation.setTitle({
      title: "文化关怀" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    async show_Rotation_chart() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getRotationPicture?corpId=${corpId}&userId=${userId}&type=5`
      );
      if (res.data.data.length != 0) {
        this.images = res.data.data;
      } else {
        this.images = this.images;
      }
    },
    showBirthdayDetails(it) {
      this.$router.push({
        //核心语句
        path: "/birthdayDetails", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          dd_id: it.dd_id,
          dd_name: it.name
        }
      });
    },
    async getBirthday() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(`yuepoints/birthday?corpId=${corpId}`);
      this.list = res.data.data;
      const { cursor, errmsg, data } = res.data;
      if (data.length > 0) {
        this.show = false;
        this.showBirthday = true;
      }
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear()
      };
      this.num = date.year;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  margin-bottom: 55px;
  /deep/ .van-icon-point-gift {
    margin-top: 5px;
    font-size: 28px !important;
    color: rgb(241, 89, 89);
  }
  .img_banner {
    height: 180px;
    width: 100%;
    // padding: 10px;
    margin-bottom: 10px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .text {
    text-align: center;
    font-size: 14px;
    color: #979090;
  }
  .skeleton {
    background: #fff;
    margin: 0px 10px 5px;
    padding: 5px 15px;
    text-align: left;
    font-size: 14px;
    .skeleton_title {
      color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      background: rgb(89, 209, 255);
      display: inline-block;
      // border: 1px solid silver
    }
  }
  ul {
    margin-left: 10px;
    li:nth-child(2) {
      color: silver;
      font-size: 12px;
    }
  }

  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
